<template>
  <el-form ref="form" :model="deviceProp" label-width="auto" class="flex flex-wrap">
    <el-form-item :label="$t('FLANGE_TYPE')" class="w-50">
      <el-select v-model="lightConnProp.flangeType">
        <el-option
          v-for="item in dictList.FLANGE_TYPE"
          :key="item.value"
          :value="item.value"
          :label="item.label"
        />
      </el-select>
    </el-form-item>
    <el-form-item :label="$t('SURFACE_NUMBER')" class="w-50">
      <el-input-number
        v-model="lightConnProp.faceNum"
        :min="faceNum"
        :max="128"
        @change="changeFaceNum"
      />
    </el-form-item>
    <el-form-item :label="$t('CUSTOM')" class="w-100">
      <el-table :data="lightConnProp.faceList" border class="w-100">
        <template slot="empty">
          <NullData />
        </template>
        <el-table-column type="index" align="center" :width="resetSize(60)" :label="$t('SEQUENCE')" />
        <el-table-column prop="date" :label="$t('SURFACE_NAME')" align="center">
          <template slot-scope="scope">
            <el-form-item label-width="0">
              <el-input v-model.trim="scope.row.faceName" size="mini" maxlength="40" />
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column :label="$t('NOMINAL_CAPACITY')" align="center" width="160">
          <template slot-scope="scope">
            <el-form-item
              label-width="0"
              :prop="`odf.faceList.${scope.$index}.capacity`"
              :rules="
                getRules(
                  $t('NOMINAL_CAPACITY'),
                  5120,
                  Math.max(scope.row.oldCapacity || 0, scope.row.installNum,1),
                )
              "
            >
              <el-input v-model="scope.row.capacity" />
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column align="center" width="160" :label="$t('INSTALLED_CAPACITY')">
          <template slot-scope="scope">
            <el-form-item
              label-width="0"
              :prop="`odf.faceList.${scope.$index}.installNum`"
              :rules="
                getRules($t('INSTALLED_CAPACITY'), scope.row.capacity, scope.row.oldInstallNum)
              "
            >
              <el-input v-model="scope.row.installNum" :disabled="type === 'mod' && !scope.row.isNew" />
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column align="center" width="160" :label="$t('CONNECTED_NUMBER')">
          <template slot-scope="scope">
            <el-form-item
              label-width="0"
              :prop="`odf.faceList.${scope.$index}.connNum`"
              :rules="getRules($t('CONNECTED_NUMBER'), scope.row.installNum)"
            >
              <el-input v-model="scope.row.connNum" />
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column align="center" width="160" :label="$t('IDLE_PORT')">
          <template slot-scope="scope">
            <el-form-item
              label-width="0"
              :prop="`odf.faceList.${scope.$index}.idleNum`"
              :rules="getRules($t('IDLE_PORT'), scope.row.installNum - scope.row.connNum)"
            >
              <el-input v-model="scope.row.idleNum" />
            </el-form-item>
          </template>
        </el-table-column>
      </el-table>
    </el-form-item>
  </el-form>
</template>

<script>
  import { mapGetters } from 'vuex'

  export default {
    name: 'Flange',
    props: {
      deviceProp: {
        type: Object,
        default: () => {}
      },
      type: {
        type: String,
        default: 'add'
      }
    },
    data() {
      return {
        faceNum: 1
      }
    },
    computed: {
      ...mapGetters(['dictList']),
      lightConnProp() {
        return this.deviceProp.odf
      }
    },
    created() {
      this.faceNum = 1
      if (this.type === 'mod') {
        this.deviceProp.odf.faceList.forEach(i => {
          i.oldCapacity = i.capacity
          i.oldInstallNum = i.installNum
        })
        this.faceNum = this.lightConnProp.faceNum
      }
    },
    methods: {
      getRules(name, max, min) {
        return [
          {
            required: true,
            message: this.$t('ENTER_NAME', { msg: name }),
            trigger: 'blur'
          },
          {
            pattern: /(^[0-9]\d*$)/,
            message: this.$t('ONLY_INIT'),
            trigger: ['blur', 'change']
          },
          {
            validator: (rule, value, callback) => {
              this.validatePort(rule, value, callback, name, max, min)
            },
            trigger: ['blur', 'change']
          }
        ]
      },
      changeFaceNum(value) {
        const faceLength = this.lightConnProp.faceList.length
        const lastName = this.lightConnProp.faceList[faceLength - 1]['faceName']
        const str = lastName.replace(/[0-9]+/g, '')
        const numList = lastName.match(/\d+/g) || []
        const strnum = numList[0] || 0
        const len = value - faceLength
        if (value > faceLength) {
          for (let i = 0; i < len; i++) {
            const newItem = {
              isNew: true,
              capacity: 12,
              connNum: 0,
              faceName: str + (Number(strnum) + (i + 1)),
              idleNum: 0,
              installNum: 12
            }
            this.lightConnProp.faceList.push(newItem)
          }
        } else {
          this.lightConnProp.faceList = this.lightConnProp.faceList.slice(0, value)
        }
      },
      validatePort(rule, value, callback, name, max, min) {
        if (max && Number(value) > Number(max)) {
          callback(
            new Error(
              this.$t('PORT_CAPACITY_VALID', {
                msg1: name,
                msg2: max || 0
              })
            )
          )
        } else if (min && Number(value) < Number(min)) {
          callback(
            new Error(
              this.$t('PORT_CAPACITY_VALID_MIN', {
                msg1: name,
                msg2: min || 0
              })
            )
          )
        } else {
          callback()
        }
      }
    }
  }
</script>

<style></style>
